<template>
  <el-dialog
    :title="'选择礼品'"
    append-to-body
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible="visible"
    width="1200px"
  >
    <basic-container>
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="礼品名称" prop="giftName">
          <el-input
            v-model.trim="queryParams.giftName"
            placeholder="请输入品牌名称"
            clearable
            size="small"
            @keyup.enter.native="getDataList"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getDataList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading" :row-key="getRowKey" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
          <el-table-column
            type="index"
            header-align="center"
            :index="indexMethod"
            align="center"
            label="编号"
          >
          </el-table-column>
          <el-table-column
            prop="giftName"
            header-align="center"
            align="center"
            label="礼品名称"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="主图"
          >
            <template slot-scope="scope">
              <!-- <span>{{getGiftCover(scope.row.bannerImages)}}</span> -->
              <el-image
                style="width: 67px; height: 67px"
                :src="getGiftCover(scope.row)"
                :preview-src-list="[getGiftCover(scope.row)]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            label="创建时间"
          >
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="queryParams.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </basic-container>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { fetchList, delObj } from "@/api/shop/goods/gift";
export default {
  data(){
    return{
      canSubmit: false,

      queryParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      dataList: [],

      totalPage: 0,
      dataListLoading: false,

      multipleSelection:[],
      sku:null
    }
  },
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  methods:{

    getRowKey(row) {
      return row.id 
    },
    
    /**
     * 初始化
     */
    init(sku){
      this.sku = sku
      this.canSubmit = true;
      this.getDataList();
    },

    /**
     * 获取数据列表
     */
    getDataList() {
      this.dataListLoading = true;
      fetchList(
        Object.assign({
          giftName: this.queryParams.giftName,
          current: this.queryParams.pageIndex,
          size: this.queryParams.pageSize,
          status: '1' // 获取上架的礼品
        })
      ).then((response) => {
        this.dataListLoading = false;
        let items = response.data.data.records;
        items.forEach(item => {
          if(item.bannerImages){
            item.bannerImages = JSON.parse(item.bannerImages)
          }
        });
        this.dataList = items
        this.totalPage = response.data.data.total;
      });
    },

    /**
     * 每页数
     */
    sizeChangeHandle(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageIndex = 1;
      this.getDataList();
    },

    /**
     * 当前页
     */
    currentChangeHandle(val) {
      this.queryParams.pageIndex = val;
      this.getDataList();
    },

    /**
     * 重置
     */
    resetQuery() {
      this.queryParams.pageIndex = 1;
      this.queryParams.pageSize = 10;
      this.resetForm("queryForm");
      this.getDataList();
    },

    indexMethod(index) {
      return (
        (this.queryParams.pageIndex - 1) * this.queryParams.pageSize + index + 1
      );
    },

    /**
     * 获得主图
     */
    getGiftCover(item){
      if(item.bannerImages.length > 0){
        return item.bannerImages[0].materialUrl
      } else {
        return ''
      }
    },

    //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },

    /**
     * 获取勾选项目
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /**
     * 提交选择礼品
     */
    dataFormSubmit(){
      if(this.multipleSelection.length <= 0){
        this.$notify.error('请勾选商品');
        return
      }
      this.multipleSelection.forEach(item=>{
        
        let gift = {}
        // 设置ID
        this.$set(gift, 'id', '')
        // 赠品名称
        this.$set(gift, 'giftName', item.giftName)
        // 赠品轮播图
        this.$set(gift, 'bannerImages', JSON.stringify(item.bannerImages))
        // 赠送个数
        this.$set(gift,'count',1)
        // sku礼品展示图片
        this.$set(gift,'coverImage', null)
        // 赠品ID
        this.$set(gift, 'giftId', item.id)
        this.sku.gifts.push(gift)
      })
      console.log(this.sku.gifts)
      //this.$emit('getSelectGifts', result)
      this.closeDialog()
    }
  }
}
</script>



<style scoped lang="scss">

::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .dialogForm .form-outer {
  padding: 0 20px;
  .form-inner {
    padding: 0;
  }
}
</style>